<template>
  <div class="deviceReferenceList padding_20">
    <el-input v-model="param.deviceName"
              placeholder="请输入设备名称"
              class="w-200"
              clearable
              @clear="handleQuery" />
    <el-button type="primary"
               @click="handleQuery">查 询</el-button>
    <el-table :data="tableData"
              border
              :span-method="handleSpan"
              class="mt-20">
      <el-table-column label="图标"
                       min-width="50">
        <template slot-scope="scope">
          <el-avatar :size="50">
            <el-image :src="scope.row.imageUrl"
                      :preview-src-list="[scope.row.imageUrl]">
            </el-image>
          </el-avatar>
        </template>
      </el-table-column>
      <el-table-column prop="deviceName"
                       label="设备名称">
      </el-table-column>
      <el-table-column prop="code"
                       label="code">
      </el-table-column>
      <el-table-column prop="sortNum"
                       label="排序号">
      </el-table-column>
      <el-table-column prop="referenceName"
                       label="指标名称">
      </el-table-column>
      <el-table-column prop="content"
                       label="内容">
      </el-table-column>
      <el-table-column prop="remark"
                       label="备注">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary"
                     @click="handleEdit(scope.row)">编 辑
          </el-button>
          <el-button type="danger"
                     @click="handleDel(scope.row)">删 除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <page @getList="_getList"
          :pageTotal="pageTotal"
          ref="page"></page>
    <deviceReferenceConfig ref="deviceReferenceConfig"
                           @getList="_getList"></deviceReferenceConfig>
  </div>
</template>

<script>

  import Page from '@/base/page/page'
  import { mapGetters } from 'vuex'
  import DeviceReferenceConfig from './deviceReferenceConfig'

  export default {
    name: "deviceReferenceList",
    data () {
      return {
        tableData: [],
        pageTotal: 0,       //总条数
        wdStudioTypeList: [],
        hospitalList: [],
        loading: false,
        param: {
          deviceName: ''
        }
      }
    },
    mounted () {
      if (this.params.detectionReferenceList) {
        this.param = this.params.detectionReferenceList
      } else {
        this.$store.commit('SET_PARAMS', { detectionReferenceList: this.param })
      }
      this._getList()
    },
    methods: {
      handleSpan ({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0 || columnIndex === 1 || columnIndex === 6 || columnIndex === 7) {
          if (row.rowspan) {
            if (row.rowspan == -1) {
              return {
                rowspan: 0,
                colspan: 0
              };
            }
            if (row.rowspan > 1) {
              return {
                rowspan: row.rowspan,
                colspan: 1
              };
            }
          } else {
            return {
              rowspan: 1,
              colspan: 1
            };
          }

        }
      },
      handleQuery () {
        this.page.pageIndex=0
        this._getList()
      },
      handleEdit (row) {
        this.ajax({
          type: this.api.getDeviceReferenceByDeviceId.type,
          url: this.api.getDeviceReferenceByDeviceId.url,
          data: Object.assign({}, this.page, { deviceId: row.deviceId }),
          success: (data) => {
            /*  data.object.referenceDtoList.forEach(item => {
               if (item.criterionList) {
               } else {
                 item.criterionList = [];
               }
             }); */
            this.$refs.deviceReferenceConfig.openView(data.object);
          },
          error: (data) => {
            this.$Message.error(data.message);
          }
        })
      },
      handleDel (row) {
        this.$Modal.confirm({
          title: '确认',
          content: '<p>您确认删除该设备指标？</p>',
          onOk: () => {
            this.ajax({
              type: this.api.deviceReferenceDel.type,
              url: this.api.deviceReferenceDel.url,
              isDel: true,
              data: {
                id: row.id,
              },
              success: (data) => {
                this.$Message.success('删除成功！');
                this._getList()
              },
              error: (data) => {
                this.$Message.error(data.message);
              }
            })
          },
          onCancel: () => {
          }
        });
      },
      _getList () {
        this.ajax({
          type: this.api.deviceReferenceList.type,
          url: this.api.deviceReferenceList.url,
          data: Object.assign({}, this.page, this.param),
          success: (data) => {
            this.tableData = data.object;
            this.pageTotal = data.totalNum;
            this.$previewRefresh()
          },
          error: (data) => {
            this.$Message.error(data.message);
          }
        })
      }
    },
    computed: {
      ...mapGetters([
        'page',
        'params'
      ])
    },
    components: {
      Page,
      DeviceReferenceConfig
    }
  }
</script>

<style lang="scss">
  .deviceReferenceList {
  }
</style>
